<template>
  <div class="bottom-right-chart">
    <ChartComp id="bottomRight" :message="pieRight" />
  </div>
</template>

<script >
import * as echarts from "echarts";
export default {
  data() {
    return {
      pieRight: {
        legend: {
          show: false,
          top: "5%",
          left: "center",
          icon: "rect", // 形状
          itemWidth: 12, // 宽
          itemHeight: 12, // 高
          textStyle: {
            //图例文字的样式
            color: "#ccc",
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "item",
        },
        graphic: [
          {
            type: "text",
            left: "43%",
            top: "43%",
            style: {
              text: "6.78",
              textAlign: "center",
              fill: "#fff",
              fontSize: 36,
            },
          },
          {
            type: "text",
            left: "46%",
            top: "65%",
            style: {
              text: "亿元",
              textAlign: "center",
              fill: "#CCE0F7",
              fontSize: 20,
            },
          },
        ],
        series: [
          {
            name: "投资规模/原值",
            type: "pie",
            radius: ["55%", "75%"],
            center: ["50%", "55%"],
            data: [
              {
                value: 21,
                name: "科研设施",
                itemStyle: {
                  // normal: {
                  //颜色渐变
                  color: new echarts.graphic.LinearGradient(
                    1,
                    1,
                    1,
                    0, //(上-下 渐变)
                    [
                      { offset: 0, color: "#FD9494" },
                      { offset: 1, color: "#ED5656" },
                    ]
                  ),
                  // },
                },
              },
              {
                value: 55,
                name: "仪器设备",
                itemStyle: {
                  // normal: {
                  //颜色渐变
                  color: new echarts.graphic.LinearGradient(
                    1,
                    1,
                    1,
                    0, //(上-下 渐变)
                    [
                      { offset: 0, color: "#FFF5B6" },
                      { offset: 1, color: "#DFC338" },
                    ]
                  ),
                  // },
                },
              },
              {
                value: 34,
                name: "软件系统",
                itemStyle: {
                  // normal: {
                  //颜色渐变
                  color: new echarts.graphic.LinearGradient(
                    1,
                    1,
                    1,
                    0, //(上-下 渐变)
                    [
                      { offset: 0, color: "#9AFEA5" },
                      { offset: 1, color: "#5AD8A6" },
                    ]
                  ),
                  // },
                },
              },
            ],
            itemStyle: {
              borderRadius: 2,
              borderColor: "#001D40",
              borderWidth: 2,
            },
            label: {
              formatter: "{b}\n\n{c}%",
              color: "#B5C5D4",
            },
          },
        ],
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .bottom-right-chart {
    width: 100%;
    height: 100%;
  }
</style>
